<template>
  <div class="homeright">
    <div class="shop" @click="drawer=true">
      <img src="./img/meg_showcar.png" alt="">
      <p class="title">购物车</p>
      <span>{{mainnums ||0}}</span>
    </div>
    <div class="top" @click="gotop">
      <img src="./img/meg_top.png" alt="">
    </div>
    <!-- //抽屉 -->

    <el-drawer title="购物车" :visible.sync="drawer" :direction="direction" :append-to-body="true" class="aa">
      <div class="shopdrawer">
        <div class="info" v-if=" userinfo.id">
          <div class="drawerleft">
            <input type="checkbox" :checked='ischecked' @click="selectcheck(ischecked)"><span>全选</span>
          </div>
          <span @click="bigcart">全屏查看</span>
        </div>

        <div class="shoplist" v-if=" ! userinfo.id">
          <h5>请先登录~</h5>
          11111

        </div>
        <!-- // -->
        <div v-else class="contents">

          <Cartitem v-for="(goods,index) in cartgoods" :key="index" :goods="goods" @computeShopCar="computeShopCar"></Cartitem>
        </div>

        <div class="foot" v-if="cartgoods.length">
          <div class="footinfo">
            <span>已选{{num}}件</span>
            <span>￥{{priceall}}</span>
          </div>
          <el-button type="danger" class="but" size="small" @click="goto">结算</el-button>

        </div>

      </div>
    </el-drawer>

  </div>
</template>

<script>
import Cartitem from '@/views/Home/cartitem.vue'
import { mapGetters, mapState } from 'vuex'
import { MessageBox } from 'element-ui'
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      ischecked: false, //全选
      num: 0, //总数量
      priceall: 0, //总价格
      mainnum: 0, //标签的数量
      goodsdelete: {} //删除的商品
    }
  },
  computed: {
    ...mapGetters(['userinfo']),
    ...mapState('cart', ['cartgoods']),
    mainnums() {
      return (this.mainnum = this.cartgoods.length)
    }
  },
  methods: {
    //返回顶部
    gotop() {
      var top = document.body.scrollTop || document.documentElement.scrollTop
      if (top <= 0) {
        MessageBox({
          type: 'success',
          message: '不要点啦~您已经在顶部了',
          showClose: true
        })
      } else {
        scrollBy(0, -top)
        MessageBox({
          type: 'success',
          message: '欢迎回到顶部',
          showClose: true
        })
      }
    },
    //全选的判断方法
    computeShopCar() {
      this.priceall = 0
      this.num = 0
      let price = 0
      let newprice = 0
      let flag = true
      this.cartgoods.forEach(goods => {
        if (goods.checked) {
          price += (goods.buy_count * goods.price) / 100
          newprice = price.toFixed(2)
          this.num++
        } else {
          flag = false
        }
      })
      this.ischecked = flag
      this.priceall = newprice
    },
    //全屏
    bigcart() {
      this.$router.push('/shopcart')
    },
    //结算
    goto() {
      let a = this.cartgoods.filter(i => {
        return i.checked
      })
      if (a.length) {
        this.$confirm('是否结算', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$store.dispatch('cart/pldeleteCart', { id: this.userinfo.id, a })
            this.$router.replace('/zf')
          })
          .catch(() => {
            return
          })
      } else {
        this.$message({
          message: '请选择商品',
          type: 'warning'
        })
      }
    },

    //全选
    selectcheck(ischecked) {
      this.ischecked = !ischecked
      this.$store.dispatch('cart/selectedall', { ischecked })
      this.computeShopCar()
    }
  },
  mounted() {
    this.$nextTick(() => {
      let user_id = this.userinfo.id

      this.$store.dispatch('cart/cartlist', { user_id })
    })
  },
  components: {
    Cartitem
  }
}
</script>

<style scoped lang='less'>
.homeright {
  height: 100%;
  width: 38px;
  position: fixed;
  top: 0;
  right: 0;
  background: #000000;
  .shop {
    &:nth-of-type(1) {
      margin-top: 180px;
      p {
        color: #fc5531;
        font-size: 21px;
        text-align: center;
      }
      span {
        text-align: center;
        display: block;
        margin: 20px 5px;
        height: 30px;
        width: 30px;
        color: #fc5531;
        font-size: 21px;
        border: 1px solid red;
        border-radius: 50%;
        background: red;
      }
    }
  }
  .top {
    width: 38px;
    position: fixed;
    bottom: 20px;
  }
}
.shopdrawer {
  display: flex;
  flex-direction: column;
  height: 100%;

  .info {
    display: flex;

    justify-content: space-between;
    margin: 0 20px;
  }
  .shoplist {
    flex: 1;

    h5 {
      text-align: center;
    }
  }
  .contents {
    padding-bottom: 60px;
  }
  .foot {
    background: #f7f7f7;
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;

    .footinfo {
      margin-left: 20px;
      display: flex;

      span {
        display: block;
        width: 80px;
      }
    }
    .but {
      position: fixed;
      right: 20px;
    }
  }
}

::v-deep .el-drawer__open .el-drawer.rtl {
  display: flex;

  height: 100vh;
  width: 100vw;
  flex-direction: column;
}
</style>